<template>
  <div class="app-container">
    <!-- 桌面端布局 -->
    <el-row :gutter="10" v-if="!isMobile">
      <el-col :span="showTree ? 6 : 0">
        <CourseTree :title="title" :value="queryParams.course" @search="getList1" />
      </el-col>
      <el-col :span="showTree ? 18 : 24">
        <div class="course_content">
          <el-row type="flex" justify="around" style="width: 100%">
            <el-col :span="20">
              <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
                <el-form-item label="关联课程" prop="exam">
                  <el-select v-model="queryParams.course" placeholder="请选择.." clearable filterable size="small"
                    @change="handleQuery">
                    <el-option v-for="dict in categoryList" :key="dict.id" :label="dict.name" :value="dict.id" />
                  </el-select>
                </el-form-item>
                <el-form-item label="培训状态" prop="state">
                  <el-select v-model="queryParams.state" placeholder="请选择.." clearable size="small"
                    @change="handleQuery">
                    <el-option v-for="dict in stateOptions" :key="dict.dictValue" :label="dict.dictLabel"
                      :value="dict.dictValue" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini" @click="handleQuery" :style="{
                    backgroundColor: theme,
                    borderColor: theme
                  }">搜索</el-button>
                  <el-button size="mini" @click="resetQuery">清空</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-button type="primary" icon="el-icon-plus" :style="{
            backgroundColor: theme,
            borderColor: theme,
            fontWeight: 'bold',
          }" v-hasPermi="['train:list:add']" @click="handleAdd()">新增培训</el-button>
          <right-toolbar :showSearch.sync="showSearch" :showTree.sync="showTree" @queryTable="getList"></right-toolbar>
          <el-table :data="List" v-loading="loading" size="mini" style="width: 100%; margin-top: 20px" align="center">
            <el-table-column label="序号" min-width="40">
              <template slot-scope="scope">
                {{ (queryParams.page - 1) * queryParams.page_size + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="培训名称" prop="name"> </el-table-column>
            <el-table-column label="所属分类">
              <template slot-scope="scope">
                {{ scope.row.course.name }}
              </template>
            </el-table-column>
            <el-table-column label="培训描述" prop="desc"> </el-table-column>

            <el-table-column label="培训人员" :show-overflow-tooltip="true" v-if="admin">
              <template slot-scope="scope">
                <template v-if="scope.row.user.length > 0">
                  <el-dropdown>
                    <span class="el-dropdown-link">{{ scope.row.user[0].name }}
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-for="user in scope.row.user" :key="user.id">{{
                        user.name
                        }}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>

                <template v-else>
                  <span>暂无培训人员</span>
                </template>
              </template>
            </el-table-column>
            <el-table-column label="开始时间" prop="start_time" v-if="!showTree">
              <template slot-scope="scope">
                {{ scope.row.start_time | formatDate2 }}
              </template>
            </el-table-column>
            <el-table-column label="结束时间" prop="end_time" v-if="!showTree">
              <template slot-scope="scope">
                {{ scope.row.end_time | formatDate2 }}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="create_time">
              <template slot-scope="scope">
                {{ scope.row.create_time | formatDate1 }}
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span v-show="scope.row.start_time > parseTime(new Date())">未开始</span>
                <span v-show="scope.row.end_time < parseTime(new Date())">已结束</span>
                <span
                  v-show="scope.row.start_time < parseTime(new Date()) && parseTime(new Date()) < scope.row.end_time">进行中</span>
              </template>
            </el-table-column>

            <el-table-column label="完成情况" :show-overflow-tooltip="true">
              <template slot-scope="scope">
          
                <template v-if="scope.row.user.length > 0 && (!admin)">
                  <span v-for="user in scope.row.user" :key="user.id">
                    <span v-show="user.id == id && !admin">{{ user.train.is_passed | is_passedFilters }}</span>
                  </span>
                </template>
                <template v-else>

                  <el-dropdown>
                    <span class="el-dropdown-link">{{ scope.row.user[0].name }}{{ scope.row.user[0].train.is_passed |
                      is_passedFilters }}
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-for="user in scope.row.user" :key="user.id">{{ user.name }}{{
                        user.train.is_passed | is_passedFilters }}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>


                </template>

              </template>

            </el-table-column>

            <!-- <el-table-column label="课程目录" align="center" v-if="!admin">
              <template slot-scope="scope">
                <el-button type="text" @click="handleChapter(scope.row)" :style="{ color: theme }">
                  详情</el-button>
              </template>

            </el-table-column> -->
            <el-table-column label="操作" prop="score" min-width="120">
              <template slot-scope="scope">
                <el-row :gutter="10">

                  <el-col :span="1.5">

                    <el-tooltip class="item" effect="dark" content="统计" placement="top"
                      v-hasPermi="['train:statistics:get']">
                      <router-link :to="{
                        path: '/train/statistics',
                        query: { train: scope.row.id, user: scope.row.user },
                      }">
                        <i class="el-icon-time" :style="{
                          fontSize: '17px',
                          marginRight: '10px',
                          cursor: 'pointer',
                          color: theme,
                        }" v-hasPermi="['train:statistics:get']" />
                      </router-link>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                      <svg-icon icon-class="editor" @click="handleUpdate(scope.row)"
                        style="font-size: 17px; margin-right: 10px; cursor: pointer"
                        v-hasPermi="['train:list:editor']" />
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                      <svg-icon icon-class="del" @click="handleDelete(scope.row)"
                        style="font-size: 17px; cursor: pointer" v-hasPermi="['train:list:delete']" />
                    </el-tooltip>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page"
            :limit.sync="queryParams.page_size" @pagination="getList" />
        </div>
      </el-col>
    </el-row>

    <!-- 移动端布局 -->
    <template v-if="isMobile">
      <!-- 显示骨架屏 -->
      <mobile-skeleton v-if="loading" :showSearch="true" :searchFields="2" :cardsCount="3"
        :showPagination="total > 0" />

      <template v-else>
        <!-- 移动端分类树 -->
        <div v-if="showTree" class="mobile-tree-container">
          <div class="mobile-tree-header">
            <span :style="{ color: theme }">{{ title }}</span>
            <el-button type="text" icon="el-icon-arrow-up" @click="showTree = false" :style="{ color: theme }"
              v-if="showTree">
              收起
            </el-button>
          </div>
          <CourseTree :title="title" :value="queryParams.course" @search="getList1" />
        </div>
        <div v-else class="mobile-tree-toggle">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-button type="primary" size="small" icon="el-icon-arrow-down" @click="showTree = true" :style="{
                backgroundColor: theme,
                borderColor: theme,
                width: '100%',
                marginBottom: '10px',
                borderRadius: '4px',
                height: '36px'
              }">
                展开课程分类
              </el-button>
            </el-col>
          </el-row>
        </div>

        <!-- 移动端表单 -->
        <div class="mobile-search-form">
          <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true" class="mobile-form">
            <el-form-item label="关联课程" prop="exam">
              <el-select v-model="queryParams.course" placeholder="请选择.." clearable filterable size="small"
                @change="handleQuery" style="width: 100%">
                <el-option v-for="dict in categoryList" :key="dict.id" :label="dict.name" :value="dict.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="培训状态" prop="state">
              <el-select v-model="queryParams.state" placeholder="请选择.." clearable size="small" @change="handleQuery"
                style="width: 100%">
                <el-option v-for="dict in stateOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="handleQuery" :style="{
                backgroundColor: theme,
                borderColor: theme,
                width: '100%'
              }">搜索</el-button>
              <el-button size="mini" @click="resetQuery" style="width: 100%; margin-top: 10px;">清空</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 移动端操作按钮 -->
        <div class="mobile-action-buttons">
          <el-button type="primary" icon="el-icon-plus" :style="{
            backgroundColor: theme,
            borderColor: theme,
            fontWeight: 'bold',
            marginBottom: '10px',
            width: '100%'
          }" v-hasPermi="['train:list:add']" @click="handleAdd()">新增培训</el-button>
        </div>

        <!-- 移动端卡片列表 -->
        <div class="mobile-card-list">
          <el-card v-for="(item, index) in List" :key="index" class="mobile-card" shadow="hover">
            <!-- 培训名称 -->
            <div class="mobile-card-header">
              <div class="card-title" :style="{ color: theme, fontWeight: 'bold' }">
                {{ item.name }}
              </div>
            </div>

            <!-- 培训基本信息 -->
            <div class="mobile-card-info">
              <div class="info-item">
                <span class="info-label">所属分类：</span>
                <span class="info-value">{{ item.course.name }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">开始时间：</span>
                <span class="info-value">{{ item.start_time | formatDate2 }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">结束时间：</span>
                <span class="info-value">{{ item.end_time | formatDate2 }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">创建时间：</span>
                <span class="info-value">{{ item.create_time | formatDate1 }}</span>
              </div>
            </div>

            <!-- 培训描述 -->
            <div class="mobile-card-info" v-if="item.desc">
              <div class="info-item">
                <span class="info-label">培训描述：</span>
                <span class="info-value">{{ item.desc }}</span>
              </div>
            </div>

            <!-- 培训状态 -->
            <div class="mobile-card-info">
              <div class="info-item">
                <span class="info-label">状态：</span>
                <el-tag size="small" type="success"
                  v-if="item.start_time < parseTime(new Date()) && parseTime(new Date()) < item.end_time">进行中</el-tag>
                <el-tag size="small" type="info" v-if="item.start_time > parseTime(new Date())">未开始</el-tag>
                <el-tag size="small" type="danger" v-if="item.end_time < parseTime(new Date())">已结束</el-tag>
              </div>
            </div>

            <!-- 展开查看培训人员 -->
            <div v-if="expandedCards.includes(index)" class="mobile-card-detail">
              <div class="mobile-detail-section">
                <div class="section-title">培训人员</div>
                <div class="section-content" v-if="item.user && item.user.length > 0">
                  <div v-for="user in item.user" :key="user.id" class="user-item">
                    <span class="user-name">{{ user.name }}</span>
                    <span class="user-status">{{ user.train.is_passed | is_passedFilters }}</span>
                  </div>
                </div>
                <div class="section-content empty-content" v-else>
                  暂无培训人员
                </div>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="mobile-card-actions">
              <el-button type="text" @click="toggleExpand(index)">
                {{ expandedCards.includes(index) ? '收起' : '查看人员' }}
              </el-button>
              <div>
                <el-tooltip class="item" effect="dark" content="统计" placement="top"
                  v-hasPermi="['train:statistics:get']">
                  <router-link :to="{
                    path: '/train/statistics',
                    query: { train: item.id, user: item.user },
                  }">
                    <i class="el-icon-time" :style="{
                      fontSize: '17px',
                      marginRight: '10px',
                      cursor: 'pointer',
                      color: theme,
                    }" v-hasPermi="['train:statistics:get']" />
                  </router-link>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <svg-icon icon-class="editor" @click="handleUpdate(item)"
                    style="font-size: 17px; margin-right: 10px; cursor: pointer" v-hasPermi="['train:list:editor']" />
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <svg-icon icon-class="del" @click="handleDelete(item)" style="font-size: 17px; cursor: pointer"
                    v-hasPermi="['train:list:delete']" />
                </el-tooltip>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 移动端分页 -->
        <div class="mobile-pagination" v-if="total > 0">
          <div class="mobile-pagination-wrapper">
            <!-- 第一行：总数和每页条数 -->
            <div class="pagination-row top-row">
              <span class="el-pagination__total">共 {{ total }} 条</span>
              <el-select v-model="queryParams.page_size" size="mini" class="el-pagination__sizes"
                @change="handleSizeChange">
                <el-option v-for="item in [10, 20, 30, 50]" :key="item" :label="`${item}条/页`" :value="item">
                </el-option>
              </el-select>
            </div>

            <!-- 第二行：页码导航 -->
            <div class="pagination-row bottom-row">
              <el-pagination background @current-change="handleCurrentChange" :current-page="queryParams.page"
                :page-size="queryParams.page_size" layout="prev, pager, next, jumper" :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import store from "@/store";
import variables from "@/assets/styles/variables.scss";
import { getTrain, delTrain, trainTestDetail } from "@/api/vadmin/train/train";
import {
  categoryList,
} from "@/api/vadmin/course/course";
import CourseTree from "@/components/CourseTree";
import MobileSkeleton from "@/components/MobileSkeleton";
import "@/assets/styles/mobile/exam.scss"; // 引入移动端公共样式

export default {
  name: "train",
  components: { CourseTree, MobileSkeleton },
  data() {
    return {
      // 遮罩层
      loading: true,
      showTree: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      courseList: null,
      List: [],
      stateOptions: [
        {
          dictValue: 1,
          dictLabel: "未开始",
        },
        {
          dictValue: 2,
          dictLabel: "进行中",
        },
        {
          dictValue: 3,
          dictLabel: "已结束",
        },
      ],
      title: "培训分类",
      form: {
        id: undefined,
        name: undefined,
        desc: undefined,
        course: undefined,
      },
      // 查询参数
      queryParams: {
        page: 1,
        page_size: 10,
        course: undefined,
        state: undefined,
      },
      admin: store.getters.roles[0].name == '管理员' || store.getters.roles[0].name == '超级管理员',
      courseName: "",
      options: [],
      courseOptions: [],
      categoryList: [],
      expandedCards: [],
      screenWidth: document.body.clientWidth,
      mediaQueryList: null,
      isMobile: false // 新增移动设备状态变量
    };
  },
  filters: {
    formatDate1(value) {
      return value && value.slice(0, 10);
    },
    formatDate2(value) {
      return value && value.slice(0, 16);
    },
    is_passedFilters(value) {
      return value == 0 ? "(未完成)" : value == 1 ? "(已完成)" : value == 2 ? "(已考核)" : "";
    },
  },
  computed: {
    ...mapGetters(["roles", "userid"]),
    ...mapState(["settings"]),
    theme() {
      return this.$store.state.settings.theme;
    },
    id() {
      return this.$store.getters.userid;
    }
  },
  created() {
    this.getList1();
    this.getCourseCate();


    // 初始化移动设备状态
    this.isMobile = document.body.clientWidth < 768;
    // 监听屏幕宽度变化
    this.mediaQueryList = window.matchMedia("(max-width: 768px)");
    this.mediaQueryList.addListener(this.handleScreenWidthChange);
  },
  mounted() {
    // 使用媒体查询API直接监听视口变化
    this.mediaQueryList = window.matchMedia('(max-width: 767px)');

    // 初始化isMobile状态
    this.isMobile = this.mediaQueryList.matches;

    // 为媒体查询添加监听器
    const handleMediaChange = (e) => {
      this.isMobile = e.matches;
      // 强制组件重新渲染
      this.$forceUpdate();
    };

    // 使用适当的API添加监听器
    if (this.mediaQueryList.addEventListener) {
      this.mediaQueryList.addEventListener('change', handleMediaChange);
    } else {
      // 旧版浏览器支持
      this.mediaQueryList.addListener(handleMediaChange);
    }

    // 存储监听器以便后续移除
    this.mediaChangeHandler = handleMediaChange;
  },
  beforeDestroy() {
    // 移除媒体查询监听器
    if (this.mediaQueryList) {
      if (this.mediaQueryList.removeEventListener) {
        this.mediaQueryList.removeEventListener('change', this.mediaChangeHandler);
      } else {
        // 旧版浏览器支持
        this.mediaQueryList.removeListener(this.mediaChangeHandler);
      }
    }
    // 移除监听器
    if (this.mediaQueryList) {
      this.mediaQueryList.removeListener(this.handleScreenWidthChange);
    }
  },
  methods: {
    /** 查询列表1 */
    getCourseCate() {
      categoryList({ page: 1, page_size: 999 }).then((response) => {
        // 确保results存在并且是数组
        if (response && response.results && Array.isArray(response.results)) {
          this.categoryList = response.results;

          let menuList = response.results.map(function (obj) {
            return { label: obj.name, value: obj.id };
          });
          this.courseOptions = menuList;
        } else {
          console.warn("获取分类列表返回的数据格式不正确:", response);
          this.categoryList = [];
          this.courseOptions = [];
        }
        this.loading = false;
      }).catch(error => {
        console.error("获取分类列表失败:", error);
        this.categoryList = [];
        this.courseOptions = [];
        this.loading = false;
      });
    },
    // 列表1
    getList1(courseId) {
      if (courseId !== undefined) {
        this.queryParams.course = courseId;
      }
      this.getList();
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      getTrain(this.queryParams).then((response) => {
        if (response && response.results) {
          this.List = response.results || [];
          this.total = response.count || 0;
        } else {
          console.warn("获取培训列表返回的数据格式不正确:", response);
          this.List = [];
          this.total = 0;
        }
        this.loading = false;
      }).catch(error => {
        console.error("获取培训列表失败:", error);
        this.List = [];
        this.total = 0;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.course = undefined;
      this.queryParams.state = undefined;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getCourseList(parentId) {
      this.queryParams.parentId = parentId;
    },
    /*新增考试 */
    handleAdd() {
      this.$router.push({ name: "newtrain" });
    },
    /*修改试卷 */
    handleUpdate(row) {
      this.$router.push({ name: "newtrain", params: { id: row.id } });
    },
    /* 删除考试 */
    handleDelete(row) {
      this.$confirm('是否确认删除?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delTrain(row.id).then((response) => {
          if (response.code == 1000) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getList();
          }
        });
      });
    },
    parseTime(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      return `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')} ${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
    },
    // 处理屏幕宽度变化
    handleScreenWidthChange(e) {
      this.screenWidth = document.body.clientWidth;
      this.isMobile = this.screenWidth < 768;
    },
    // 切换卡片展开状态
    toggleExpand(index) {
      const position = this.expandedCards.indexOf(index);
      if (position !== -1) {
        this.expandedCards.splice(position, 1);
      } else {
        this.expandedCards.push(index);
      }
    },
    // 处理分页大小变化
    handleSizeChange(val) {
      this.queryParams.page_size = val;
      this.getList();
    },
    // 处理页码变化
    handleCurrentChange(val) {
      this.queryParams.page = val;
      this.getList();
    }
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: transparent;
  padding: 0;
}

.form-buttons {
  display: flex;
  justify-content: space-between;

  .el-button+.el-button {
    margin-left: 0;
  }
}

/* 移动端卡片样式 */
.mobile-card-view {
  margin-top: 15px;

  .empty-data {
    text-align: center;
    padding: 40px 0;
    color: #909399;

    i {
      font-size: 40px;
      margin-bottom: 10px;
    }

    p {
      font-size: 14px;
    }
  }

  .mobile-card {
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s;

    &:active {
      transform: scale(0.99);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .card-title {
        font-weight: bold;
        font-size: 16px;
        line-height: 1.3;
        flex: 1;
      }

      .card-actions {
        display: flex;

        i {
          font-size: 18px;
        }
      }
    }

    .card-content {
      padding: 10px 0;

      .info-list {
        margin: 10px 0;

        .info-item {
          margin: 8px 0;
          display: flex;
          flex-wrap: wrap;
          align-items: center;

          .label {
            color: #606266;
            margin-right: 5px;
            font-size: 14px;
            min-width: 80px;
          }

          .value {
            color: #333;
            font-size: 14px;
            flex-grow: 1;
          }

          .status-tag {
            padding: 2px 8px;
            border-radius: 4px;
            display: inline-block;

            &.not-started {
              background-color: #f0f9eb;
              color: #67c23a;
            }

            &.in-progress {
              background-color: #e6f1fc;
              color: #409eff;
            }

            &.completed {
              background-color: #f4f4f5;
              color: #909399;
            }
          }
        }
      }

      .exam-details {
        margin-top: 15px;

        .details-section {
          margin-top: 10px;
          background-color: #f8f9fa;
          border-radius: 6px;
          padding: 10px 15px;
        }
      }

      .card-toggle {
        text-align: center;
        margin: 12px 0 5px;

        .el-button {
          width: 100%;
          padding: 10px 0;
          font-size: 13px;

          i {
            margin-left: 5px;
            font-weight: bold;
          }
        }
      }
    }
  }
}

/* 移动端分页样式 */
.mobile-pagination {
  margin: 20px 0 30px;

  .mobile-pagination-wrapper {
    width: 100%;

    .pagination-row {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 8px;
      flex-wrap: wrap;

      &:last-child {
        margin-bottom: 0;
      }

      &.top-row {
        justify-content: space-around;
      }
    }
  }
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .mobile-form {
    .el-form-item {
      width: 100%;
      margin-bottom: 15px;
    }
  }

  .mobile-search-form {
    margin-top: 10px;
  }

  .mobile-action-buttons {
    margin-top: 10px;
  }

  .mobile-card-list {
    margin-top: 15px;

    .mobile-card {
      margin-bottom: 15px;

      .mobile-card-header {
        margin-bottom: 15px;

        .card-title {
          font-size: 16px;
          font-weight: bold;
        }
      }

      .mobile-card-info {
        margin-bottom: 10px;

        .info-item {
          display: flex;
          align-items: flex-start;
          margin-bottom: 8px;

          .info-label {
            color: #606266;
            font-size: 14px;
            min-width: 80px;
          }

          .info-value {
            font-size: 14px;
            word-break: break-all;
          }
        }
      }

      .mobile-card-detail {
        background-color: #f9f9f9;
        padding: 10px;
        border-radius: 4px;
        margin: 10px 0;

        .mobile-detail-section {
          .section-title {
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 15px;
            border-bottom: 1px solid #ebeef5;
            padding-bottom: 5px;
          }

          .section-content {
            .user-item {
              display: flex;
              justify-content: space-between;
              padding: 5px 0;
              border-bottom: 1px dashed #ebeef5;

              .user-name {
                font-size: 14px;
              }

              .user-status {
                font-size: 14px;
                color: #409EFF;
              }
            }

            &.empty-content {
              color: #909399;
              padding: 20px 0;
              text-align: center;
            }
          }
        }
      }

      .mobile-card-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid #ebeef5;

        .el-button {
          padding: 0;
          margin-right: 15px;
        }
      }
    }
  }

  .mobile-pagination {
    margin-top: 20px;

    .mobile-pagination-wrapper {
      .pagination-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .el-pagination__sizes {
          width: 100px;
        }
      }

      .bottom-row {
        display: flex;
        justify-content: center;

        .el-pagination {
          padding: 0;
          text-align: center;
        }
      }
    }
  }

  .mobile-tree-container {
    background-color: #fff;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .mobile-tree-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 10px;
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 10px;

      span {
        font-weight: bold;
        font-size: 16px;
      }
    }
  }

  // 弹窗样式
  .mobile-dialog {
    .el-dialog__body {
      padding: 15px !important;
    }

    .el-form-item {
      margin-bottom: 15px;
    }

    .dialog-footer {
      .el-button {
        width: 100%;
        margin-left: 0 !important;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
